import React from 'react';
import './css/Header.css';
import {NavLink } from 'react-router-dom';
import { useState } from 'react';

const Header = () => {
    const [isShow1,setShow1] = useState(true);
    const [isShow2,setShow2] = useState(false);
    const [isShow3,setShow3] = useState(false);
    //点击一级导航栏二级导航栏显示效果
    const showIt = (i)=>{
        if(i==1){
            setShow1(!isShow1)
            if(isShow2){
                setShow2(!isShow2)
            }
            if(isShow3){
                setShow3(!isShow3)
            }
        }
        if(i==2){
            setShow2(!isShow2)
            if(isShow1){
                setShow1(!isShow1)
            }
            if(isShow3){
                setShow3(!isShow3)
            }
        }
        if(i==3){
            setShow3(!isShow3)
            if(isShow2){
                setShow2(!isShow2)
            }
            if(isShow1){
                setShow1(!isShow1)
            }
        }
    }

    return (
        <div className='header'>
            <div className="navBox alter-big">
                <span onClick={()=>showIt(1)}>素材中心</span>
                <div className="alter-small" style={isShow1?{display:'flex'}:{display:'none'}}>
                    <NavLink className={'navlink'} activeStyle={{ color: '#FF8000' }}  to='/alter'>素材</NavLink>
                    <NavLink className={'navlink'} activeStyle={{ color: '#FF8000' }} to='/hot'>热点素材</NavLink>
                    <NavLink className={'navlink'} activeStyle={{ color: '#FF8000' }} to='/allSu'>所有素材</NavLink>                                    
                </div>
            </div>
            <div className="navBox alter-big">
                <span onClick={()=>showIt(2)}>用户中心</span>
                <div className="alter-small" style={isShow2?{display:'flex'}:{display:'none'}}>
                    <NavLink className={'navlink'} activeStyle={{ color: '#FF8000' }} to='/user'>用户</NavLink>
                    <NavLink className={'navlink'} activeStyle={{ color: '#FF8000' }} to='/suggestion'>用户反馈</NavLink>        
                </div>
            </div>
            <div className="navBox">
                <span onClick={()=>showIt(3)}>个人中心</span>
                <div className='alter-small' style={isShow3?{display:'flex'}:{display:'none'}}>
                    <NavLink className={'navlink'} activeStyle={{ color: '#FF8000' }} to='/adminUser'>个人中心</NavLink>
                </div>
            </div>
        </div>
    )
}

export default Header